<template>
    <div class="sh_all">
        <div class="components_title">
            <TitleTop>
            </TitleTop>
            <TitleMenu>
                <div slot="titleMenu_ico" @click="jumpBack()">
                    <div class="title_left_ico">
                        <a-icon type="left" class="Group_ico" theme="outlined" />
                    </div>
                    <div class="title_left_text">返回</div>
                </div>
                <div slot="titleMenu_text" class="Homework_titleMenu_text">
                    <span>搜索频道</span>
                </div>
                <!--<div slot="titleMenu_add">
                    <a-icon type="sync" style="font-size: 7vw;" theme="outlined" @click="refresh()" :class="[rotate?'go':'aa']" />
                </div>-->
            </TitleMenu>
        </div>
        <!--搜索框-->
        <div class="ch_content" v-bind:class="{'classMaskGreen': joinChannelMask}" v-loading="$store.state.Loading">
            <a-row class="ch_search_row" >
                <a-col :span="22" :push="1" class="ch_search_col">
                    <div class="ch_search_input" >
                        <a-input placeholder="频道号或频道名称" style="width:75vw;height: 13vw;" v-focus v-model="channelValue"
                                 v-bind:class="{'classInputMaskGreen': joinChannelMask}"/>
                    </div>
                    <div class="search_ico">
                        <a-icon type="search" style="font-size: 8vw" @click="searchChannel()" class="ch_search_ico"/>
                    </div>
                </a-col>
            </a-row>
            <!--搜索结果-->
            <div v-if="$store.state.channelSearch!==''" @click="joinSearchChannel($store.state.channelSearch)">
                <a-row class="ch_search_result"   >
                    <a-col :span="15" class="ch_search_result_c1">
                        {{$store.state.channelSearch.chanName}}
                    </a-col>
                    <a-col :span="3" class="ch_search_result_c2">
                        ({{$store.state.channelSearch.onlineCount}}/{{$store.state.channelSearch.memberCount}})
                    </a-col>
                    <a-col :span="6" class="ch_search_result_c3">
                        #{{$store.state.channelSearch.chanId}}
                        <a-icon type="lock" style="font-size: 5vw;margin-top: 1vw" v-if="$store.state.channelSearch.needPwd===true" />
                        <a-icon type="unlock" style="font-size: 5vw;margin-top: 1vw" v-if="$store.state.channelSearch.needPwd===false" />
                        <a-icon type="check" style="color: green;font-size: 6vw;margin-top: 1vw" v-if="$store.state.channelSearch.joined===true"/>
                    </a-col>
                </a-row>
            </div>
            <div v-else="$store.state.channelSearch!==''">
                <a-row class="ch_search_result"   >
                    <a-col :span="24" class="ch_search_result_c1_null">
                        无数据...
                    </a-col>

                </a-row>
            </div>
        </div>

        <div class="channel_LW_return_body" v-if="joinChannelMask === true">
            <div class="channel_LW_return_header">
                <!--<div class="channel_LW_return_header_ico">
                    <a-icon type="check-circle" style="font-size: 10vw;color: springgreen;" theme="filled"/>
                </div>-->
                <div class="channel_LW_return_header_text">
                    {{$store.state.channelSearch.chanName}}
                </div>
            </div>
            <div class="channel_LW_return_content">
                <a-row class="ch_search_row" style="width: 92vw">
                    <a-col :span="23" :push="1" class="ch_search_col">
                        <div class="ch_search_input" >
                            <a-input placeholder="频道密码（无则不设置密码）" style="width:75vw;height: 13vw" v-focus v-model="channelPassWord"/>
                        </div>
                    </a-col>
                </a-row>
                <a-row class="ch_search_row" style="width: 92vw">
                    <a-col :span="23" :push="1" class="ch_search_col">
                        <div class="ch_search_input" >
                            <a-input placeholder="申请附言，供频道建立者审核" style="width:75vw;height: 13vw" v-model="channelMessage"/>
                        </div>
                    </a-col>
                </a-row>
            </div>
            <div class="channel_LW_return_footer">
                <div class="channel_LW_return_cancel">
                    <a-button class="channel_LW_return_cancel_button" @click="joinSearchChannelCancle">取消</a-button>
                </div>
                <div class="channel_LW_return_ok">
                    <a-button class="channel_LW_return_ok_button" type="primary" @click="joinSearchChannelSure">确定</a-button>
                </div>
            </div>
        </div>
    </div>

</template>
<style>
    .ch_search_ico:active{
        transform:scale(1.1);
    }
    .sh_all{
        width: 100vw;
        height: 100vh;
        background: rgb(250,250,250);
    }
    .ch_content{
        width: 100vw;
        height: calc(100vh - 30vw);
        background: rgb(250,250,250);
        padding-top: 2vw;
    }
    .ch_search_row{
        width: 100vw;
        height: 13.75vw;
        line-height: 13.75vw;
        text-align: center;
        margin-top: 3vw;
    }
    .ch_search_col{
        text-align: center;
        height: 12vw;
        line-height: 12vw;
    }
    .ch_search_input{
         float: left;
         width: 80vw;
         height: 13vw;
         line-height: 13vw;
         padding: 0;
     }

    .ch_search_input input{
        color: black;
        font-size: 6vw;
    }
    .ch_search_input input::-webkit-input-placeholder { /* WebKit browsers */
        font-size: 5vw;
    }
    .ch_search_input input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
        font-size: 5vw;
    }
    .ch_search_input input::-moz-placeholder { /* Mozilla Firefox 19+ */
        font-size: 5vw;
    }
    .ch_search_input input:-ms-input-placeholder { /* Internet Explorer 10+ */
        font-size: 5vw;
    }
    .ch_search_result{
        font-size: 5vw;
        width: 100vw;
        height: 12vw;
        line-height: 13vw;
        border-bottom: 1px solid grey;
        padding-right: 1vw;
    }
    .ch_search_result_c1{
        font-size: 5vw;
        color: black;
        text-align: left;
        padding-left: 1vw;
    }
    .ch_search_result_c1_null{
        font-size: 5vw;
        color: grey;
        text-align: center;
        padding-left: 1vw;
    }
    .ch_search_result_c2{
        font-size: 4vw;
        color: dimgrey;
        text-align: center;
    }
    .ch_search_result_c3{
        font-size: 4vw;
        color: dimgrey;
        text-align: right;
    }
    /*
   以下是自定义遮罩的css
    */
    .channel_LW_return_body{
        width: 92vw;
        border: solid 0.3vw grey;
        border-radius: 2vw;
        box-shadow: 1px 1px 1px 1px #888888;
        padding: 2vw 0 2vw 0;
        z-index: 1000;
        position: absolute;
        top: 60vw;
        left: 4vw;
        background: rgb(255,255,255);
    }

    .channel_LW_return_header{
        width: 92vw;
        height: 12vw;
        border-bottom: 0.8vw solid grey;

    }
    .channel_LW_return_content{
        width: 92vw;
        height: 35vw;
        padding: 0;
        text-align: left;
    }

    .channel_LW_return_header_ico{
        width: 15vw;
        line-height: 12vw;
        height: 12vw;
        float: left;
        text-align: right;
        padding: 1vw 0 0 0;
    }
    .channel_LW_return_header_text{
        width: 75vw;
        line-height: 12vw;
        height: 12vw;
        font-size: 6vw;
        color: black;
        float: left;
        text-align: left;
        font-weight: 500;
        padding: 0 0 0 8vw;
    }
    .channel_LW_return_footer{
        width: 92vw;
        height: 18vw;
        border-top: 0.2vw dashed grey;
        padding-top:2vw ;
    }
    .channel_LW_return_cancel{
        width: 47vw;
        height: 18vw;
        line-height: 18vw;
        float: left;
        padding-left: 5vw;

    }
    .channel_LW_return_ok{
        height: 18vw;
        /*width: 47vw;
        float: left;
        padding-right: 5vw;单个按钮居中显示*/
        line-height: 18vw;
        text-align: center;
    }
    .channel_LW_return_cancel_button{
        width: 30vw;
        height: 15vw;
        border: #00b7ff 0.3vw solid;
    }
    .channel_LW_return_ok_button{
        width: 30vw;
        height: 15vw;
    }
    /* 自定义遮罩 上方界面变灰*/
    .classMaskGreen{
        background: rgba(0,0,0,0.2);
        z-index: 10;
        pointer-events:none;/*给遮罩层上添加这个属性即可，防止遮罩层点击穿透，触发到确认按钮*/
    }
    .classInputMaskGreen{
        background: rgb(200,200,200);
    }
</style>
<script>
    //import someComponent from './someComponent'
    import TitleTop from '../../components/TitleTop'
    import TitleMenu from '../../components/TitleMenu'
    /*import Vue from 'vue/types'*/
    import Vue from 'vue'
    import ARow from "ant-design-vue/es/grid/Row";
    import ACol from "ant-design-vue/es/grid/Col";
    // 注册一个全局自定义指令 `v-focus`
    Vue.directive('focus', {
        // 当被绑定的元素插入到 DOM 中时……
        inserted: function (el) {
            // 聚焦元素
            el.focus()
        }
    });
    export default {
        name: "SearchChannel",
        components:{ACol, ARow, TitleTop,TitleMenu},
        directives: {
            focus: {
                // 指令的定义
                inserted: function (el) {
                    el.focus()
                }
            }
        },
        data() {
            return {
                msg: "Hello Vue.js",
                channelValue:'',
                joinChannelMask:false,
                channelPassWord:'',
                channelMessage:'',
            }
        },
        component: {
            //someComponent
        },
        mounted() {
            this.$store.commit("updateChannelSearch","");
        },
        methods:{
            jumpBack(){
                this.clickButton();
                this.$router.go(-1);
            },
            searchChannel(){
                let value = this.channelValue;
                this.$store.commit("updateChannelSearch","");
                this.$store.commit("showLoading");
                setTimeout(()=>{
                    this.$store.commit("hideLoading");
                },1000);
                if(value!==""){
                    let success = function(result){
                        console.log(result);
                    };
                    let error = function(error){
                        console.log(error);
                    };
                    let options = {
                        channelId:value
                    };
                    if(typeof (Intercom)!=="undefined"){
                        Intercom.searchChannel(success,error,options);
                    }
                }else{
                    this.$toast("请输入再搜索","short","top",80);
                }
            },
            joinSearchChannel(channelSearch){
                //(channelId,joined)
                if(channelSearch.joined===true){
                    this.$toast("已加入该频道","short","top",80);
                }else{
                    this.joinChannelMask = true;
                }
            },
            joinSearchChannelSure(){
                //(channelId,joined)
                let me = this;
                let success = function(result){
                    console.log("添加频道成员成功",result);
                    /*me.$toast("添加频道成功","short","top",80);*/
                };
                let fail = function(e){
                    console.log("添加频道成员失败",e);
                    me.$toast("添加频道成员失败","short","top",80);
                };
                let options ={
                    channelId : me.$store.state.channelSearch.chanId,
                    pwd: me.channelPassWord,
                    comment:me.channelMessage,
                };
                if(typeof (Intercom)!=="undefined"){
                    Intercom.joinChannel(success,fail,options);
                }
                me.joinChannelMask = false;

            },
            joinSearchChannelCancle(){
                this.joinChannelMask = false;
            },
        },
    }
</script>

<style>

</style>